<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/navbar.css">
    <link rel="stylesheet" href="../css/add_article.css">
    <title>添加文章</title>
</head>
<body>
    <div class="navbar">
        <div class="left">
            <a href="/">首页</a>
            <a href="/all_questions.html">编程题库</a>
        </div>
        <div class="center">
            <a href="/html/job_seek.html">求职</a>
            <a href="/html/learning.html">学习</a>
            <a href="/html/discuss.html">讨论</a>
            <a href="/html/question_bank.html">知识题库</a>
            <a href="/html/ai_qa.html">AI问答</a>
        </div>
        <div class="right">
            <a href="/html/register.html">注册</a>
            <a href="/html/login.html">登录</a>
            <a href="/html/userInfo.html" class="toRight">个人信息</a>
        </div>
    </div>

    <main>
        <h1>添加新文章</h1>
        <form id="add-article-form">
            <label for="title">标题:</label>
            <input type="text" id="title" name="title" placeholder="输入文章标题" required>

            <label for="summary">摘要:</label>
            <textarea id="summary" name="summary" placeholder="输入文章摘要" rows="3"></textarea>

            <label for="category">分类:</label>
            <select id="category" name="category" required>
                <option value="算法">算法</option>
                <option value="数据结构">数据结构</option>
                <option value="编程语言">编程语言</option>
                <option value="系统设计">系统设计</option>
                <option value="开发工具">开发工具</option>
            </select>

            <label for="content">内容:</label>
            <textarea id="content" name="content" placeholder="输入文章内容" rows="10" required></textarea>

            <label for="image_url">上传封面图片:</label>
            <input type="file" id="image_url" name="image_url" accept="image/*" onchange="previewImage(event)">
            <br>
            <img id="preview" style="max-width: 300px; max-height: 200px; display: none;" alt="图片预览">            

            <label for="tags">标签 (用逗号分隔):</label>
            <input type="text" id="tags" name="tags" placeholder="输入文章标签">

            <button type="submit">提交文章</button>
        </form>
        <div id="response-message" class="response-message"></div>
    </main>

    <script src="../js/add_article.js"></script>
</body>
</html>
